<template>
    <el-container direction="vertical">
        <nav-bar  @openDrawer="openDrawer" :categoryList="categoryList" :cid.sync="currentCid"></nav-bar>
        <el-main>
            <image-list ref="ImageList" :currentCid="currentCid"></image-list>
            <drawer ref="Drawer" :changePlatform.sync="currentPlatform"></drawer>
        </el-main>
        <bottom-bar ref="BottomBar" :isShowAbout.sync="isShowAbout"></bottom-bar>
        <about :isShowAbout.sync="isShowAbout"></about>
    </el-container>
</template>

<script>
    import Drawer from './Drawer.vue';
    import NavBar from "./NavBar.vue";
    import ImageList from './ImageList.vue';
    import BottomBar from "./BottomBar.vue";
    import Config from "../../utils/config.js";
    import About from "./About.vue";

    export default {
        data () {
            return {
                currentCid: '',
                currentPlatform: '',
                categoryList : [],
                isShowAbout: false
            }
        },
        methods: {
            openDrawer () {
                this.$refs.Drawer.drawer = true;
            },
            changePlatform(code) {
                if (!code) {
                    return 0;
                }
                this.dataSourceFactory.setCurrentPlatform(code);
                this.$refs.ImageList.changeDataSource();
                this.$refs.BottomBar.changePlatform();
                this.getPlatformCategoryList();
            },
            getPlatformCategoryList() {
                let dataSource = this.dataSourceFactory.getDataSource();
                this.categoryList = dataSource.getCategoryList();
            }
        },
        mounted() {
            let config = new Config();
            this.dataSourceFactory.setCurrentPlatform(config.getPlatform());
            this.getPlatformCategoryList();
        },
        watch : {
            currentPlatform: function (n, o) {
                this.changePlatform(n);
            },
            isShowAbout : function (n, o) {
                console.log(n, o);
            },
        },
        components: {
            'bottom-bar' : BottomBar,
            'drawer' : Drawer,
            'nav-bar' : NavBar,
            'image-list': ImageList,
            'about': About
        }
    }
</script>

<style scoped>
    .el-aside {
        background-color: rgb(84, 92, 100);
        color: #333;
        text-align: center;
        line-height: 200px;
        height: 100vh;
    }

    .el-main {
        background-color: #F9F9F9;
        color: #333;
        text-align: center;
        padding: 0;
    }
</style>
